<template>
    <div class="photoinfo">
        <h3>{{photoinfodetail.title+this.$route.params.id}}</h3>
        <p class="photoinfo-title">
            <span>发表时间：{{this.photoinfodetail.add_time | dateFormat}}</span>
            <span>点击{{this.photoinfodetail.click}}次</span>
        </p>
        <hr>

        <!-- 缩略图 -->
        <vue-preview :slides="slide1" @close="handleClose" class="suoluetu"></vue-preview>

        <!-- 内容 -->
        <div class="photoinfo-tcontent">
            {{this.photoinfodetail.content}}
        </div>

        <!-- 评论子组件 -->
        <photoinfocomment :id="id"></photoinfocomment>
    </div>
    
</template>


<script>
import comment from './../subcomponents/comment'
import { photoinfoimagelist } from './../../comment/data/taskDetail'

export default {
    data() {
        return {
            id: this.$route.params.id,
            photoinfodetail:{},
            slide1: []
        }
    },

    created(){
        this.getPhotoList();
    },

    methods: {
        getPhotoList(){
            var url = "api/getPhotoList/"+ this.id;
            console.log(url);

            var photoinfo = {
                add_time: new Date(),
                click: 1,
                content: '不要简朴不要素雅洋气卧室我做主不要简朴不要素雅洋气卧室我做主不要简朴不要素雅洋气卧室我做主，不要简朴不要素雅洋气卧室我做主',
                id: this.id,
                title: '现代简约 明亮的外表卧室背景墙、吊顶颜色'
            }

            this.photoinfodetail = photoinfo;

            this.slide1 = photoinfoimagelist;

            // this.$http.get()
            // .then(result => {

            // });
        },

        handleClose () {
            console.log('close event')
        }
    },


    components:{
        "photoinfocomment": comment

    }
    
}
</script>


<style lang="scss" scoped>
.photoinfo {
    padding: 0px 10px;

    h3{
        text-align: center;
        font-size: 14px;
        line-height: 30px;
        color: #226aff;
    }

    .photoinfo-title {
        display: flex;
        justify-content: space-between;
        font-size: 12px;  
    }

    .photoinfo-tcontent{
        font-size: 12px;
        line-height: 30px;
    }
    
}
</style>